<template>
    <div class="el-menu-demo">
        <el-menu :default-active="active"
                 mode="horizontal"
                 background-color="#ADB3FB"
                 text-color="#fff"
                 active-text-color="2B2B2B"
                 router
                 v-if="isLogin">
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/demands">需求</el-menu-item>
            <el-menu-item index="/newWork">新作</el-menu-item>
            <el-menu-item index="/hotWork">热门</el-menu-item>
            <el-menu-item index="/authors">作者</el-menu-item>
            <el-menu-item class="user" @click="logoutHandler"> 退出登录</el-menu-item>
            <el-menu-item class="user" index="/demandsRelease">发布需求</el-menu-item>
            <el-menu-item class="user" index="/personalCenter">
                <img class="user-avatar" :src="user.userImg">
            </el-menu-item>

            <el-menu-item class="input-search">
                <input @keyup.enter="search(searchText)" type="text" autocomplete="off" placeholder="输入你要找的作品或作者" v-model="searchText" class="el-input__inner">
                <i class="el-icon-search" @click="search(searchText)"></i>
            </el-menu-item>

        </el-menu>
        <el-menu :default-active="active"
                 mode="horizontal"
                 class="el-menu-demo"
                 background-color="#ADB3FB"
                 text-color="#fff"
                 active-text-color="2B2B2B"
                 router
                 v-else>
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/demands">需求</el-menu-item>
            <el-menu-item index="/newWork">新作</el-menu-item>
            <el-menu-item index="/hotWork">热门</el-menu-item>
            <el-menu-item index="/authors">作者</el-menu-item>
            <el-menu-item class="user" @click="register">免费注册</el-menu-item>
            <el-menu-item class="user" @click="loginHandler">登录</el-menu-item>
            <el-menu-item class="search-input input-search">
                <input @keyup.enter="search(searchText)" type="text" autocomplete="off" placeholder="输入你要找的作品或作者" v-model="searchText" class="el-input__inner">
                <i class="el-icon-search" @click="search(searchText)"></i>
            </el-menu-item>
        </el-menu>
    </div>

</template>

<script scoped>
    import {logout, selectUser} from "../assets/api/userApi";

    export default {
        data() {
            return {
                active: "/",
                user: {
                    username: "",
                    token: "",
                    userImg: "/img/userAvatar/defaultUserImg.jpg"
                },
                isLogin: false,
                searchText:''
            }
        },
        methods: {
            logoutHandler() {
                logout(this.user).then((res) => {
                    this.isLogin = false;
                    this.$router.replace("/login");
                });
            },
            getUserAvatar() {
                this.user.username = localStorage.username;
                selectUser(this.user).then((res) => {
                    this.user.userImg = res.data.userImg;
                })
            },
            loginHandler() {
                this.$router.push("/login");
            },
            register() {
                this.$router.push("/login");
            },
            personalCenter() {
                this.$router.push("/personalCenter");
            },
            // searchEnterFun(e){
            //     let keyCode = window.event?e.keyCode:e.which;
            //     if (keyCode == 13){
            //         this.search();
            //     }
            // },
            search(searchText){
                if (!searchText){
                    return;
                }
                else {
                    localStorage.setItem('searchText', this.searchText);

                }

            }
        },
        mounted() {
            this.searchText = localStorage.getItem('searchText');
        },
        created() {
            if (localStorage.token) {
                this.isLogin = true;
                this.getUserAvatar()
            }
        }
    };
</script>
<style scoped>
    .user {
        float: right !important;
        margin-right: 20px !important;
        line-height: 60px !important;
    }

    .user-avatar {
        width: 55px;
        height: 55px;
        border-radius: 100%;
    }

    .input-search {
        float: right !important;
        margin-right: 60px !important;
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 30%;
    }

    .el-input__inner {
        background-color: #FFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        width: 100%;
    }

    userImg {
        margin-right: 16px;
        margin-top: calc((48px - 32px) / 2);
        transition: all .2s ease-out;
        transform-origin: top center;
    }

    .el-menu-demo{
        height: 60px;
        margin-bottom: 0;
        transition: .5s;
        background-color: #adb3fb;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
        padding: 0 30px 0 40px;
        border-bottom: 1px solid #ececec;
    }
</style>
